import React from 'react'
import { connect } from 'react-redux'
import { MyState } from "../../../type/router.d"
import { bindActionCreators, Dispatch } from "redux"
import * as actions from "../../../store/modules/action"
import { Helmet } from "react-helmet"
import { useEffect } from 'react'
import style from "./index.module.scss"
import Markdown from "../markdown/index"
//评论组件
import Comments from '../../archive_comm'
// import "./markdown.scss"
// /* 按你需要导入这两个 一个是解决 浏览器兼容问题 的css，一个是代码区的样式文件 */
import "@corgicoding/theme/dist/normalize.css";
import "@corgicoding/theme/dist/github.css";

/* 主要引入文件 */
import "@corgicoding/theme";

interface PROPS {
    detaactArr: any
}
export const ArchiveConent = (props: PROPS) => {
    useEffect(() => {
        console.log(props.detaactArr)
    }, [])
    return (
        <>
            <article className={style["article-content"]}>
                <Helmet >
                    {props.detaactArr.length ? props.detaactArr.map((item: any, index: number) => {
                        return <title>{item.title}</title>
                    }) : "无数据"}

                </Helmet>
                {/* 文章主图 */}
                <div className={style["editor-cover"]}>
                    {props.detaactArr.length ? props.detaactArr.map((item: any, index: number) => {
                        return <img key={index} src={item.cover} alt="" />
                    }) : "无数据"}
                </div>
                {/* 文章标题 */}
                {props.detaactArr.length ? props.detaactArr.map((item: any, index: number) => {
                    return <div className={style["article-title"]}>{item.title}</div>
                }) : "无数据"}
                {/* 文章发布时间 */}
                {props.detaactArr.length ? props.detaactArr.map((item: any, index: number) => {
                    return <div className={style["article-publish"]}>
                        <span> <i>发布于</i> </span>
                        <span><i>{item.publishAt}</i> </span>
                        <span><i>阅读量{item.views}</i> </span>
                    </div>
                }) : "无数据"}
                {/* 文章主内容 */}
                <div>
                    <Markdown html={props.detaactArr[0].html}></Markdown>
                </div>


            </article>

            {/* 评论 */}
            {
                props.detaactArr[0].isCommentable && (
                    <>
                        <div className={style["box-title"]}>评论</div>
                        <div className={style["article-content"]}>
                            <Comments articleId={props.detaactArr[0].id}></Comments>
                        </div>
                    </>
                )
            }




        </>
    )
}

const mapStateToProps = (state: MyState) => ({
    detaactArr: state.detaactArr
})

const mapDispatchToProps = (dispatch: Dispatch) => {
    return bindActionCreators(actions, dispatch)
}


export default connect(mapStateToProps, mapDispatchToProps)(ArchiveConent)